<template>
	<view class="content">
		<view class="one-sty" style="height: 140px;">
			<u-swiper :list="list3" indicator indicatorMode="line" :autoplay="true" circular height='140' radius="0"
				Color="#F5F5F5" imgMode='aspectFill'></u-swiper>
		</view>
		<!-- 本月完成情况 -->
		<view class="two-sty">
			<view class="title-sty">
				<span class="bar"></span>
				本月完成情况
			</view>
			<view class="two-content">
				<van-grid :column-num="2">
					<van-grid-item v-for="(item,index) in twoArr" :key="index">
						<view class="three-item">
							<view style="font-size: 13px;font-weight: 600;color: #333;">{{item.name}}</view>
							<view class="" style="font-size: 19px;font-weight: 600;color: #666;">{{item.value}}</view>
						</view>
					</van-grid-item>
				</van-grid>
			</view>
		</view>
		<!-- 常用功能 -->
		<view class="three-sty">
			<view class="title-sty">
				<span class="bar"></span>
				常用功能
			</view>
			<view class="three-content">
				<van-grid :column-num="4" :border="false">
					<van-grid-item v-for="(item,index) in threeArr" :key="index">
						<view class="three-item">
							<image src="../../static/logo.png" style="height: 30px;width: 30px;" mode="aspectFit">
							</image>
							<view style="font-size: 12px;">{{item.name}}</view>
						</view>

					</van-grid-item>
				</van-grid>
			</view>
		</view>
		<!-- 水印 -->
		<next-watermark :watermark="watermark" :fontSize='12' :margin='40' :opacity='0.22' :autoWidth='130'>
		</next-watermark>
	</view>
</template>

<script setup>
	// import {
	// 	InvestorInformation
	// } from '../../request/api.js'
	import {
		ref,
		computed,
		onMounted,
		reactive
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		useStore
	} from "vuex"

	const watermark = ref(`<p style="color:#ff9900;">中联慧捷</p><p>我是p标签</p><br>`)
	const title = ref('Hello');
	const store = useStore();
	const username = computed(() => store.state.username);
	const hostName = ref('')

	const list3 = reactive([
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		'https://cdn.uviewui.com/uview/swiper/swiper1.png',
	])
	const twoArr = reactive([{
			icon: 'photo-o',
			name: '日期',
			value: "2023-05-18"
		},
		{
			icon: 'photo-o',
			name: '时间进度',
			value: "66.00%"
		},
		{
			icon: 'photo-o',
			name: '本月进件笔数',
			value: "0笔"
		},
		{
			icon: 'photo-o',
			name: '本月进件金额',
			value: "0"
		},
		{
			icon: 'photo-o',
			name: '本月放款笔数',
			value: "0笔"
		},
		{
			icon: 'photo-o',
			name: '本月放款金额',
			value: "0"
		}

	])
	const threeArr = reactive([{
			icon: 'photo-o',
			name: '贷款申请'
		},
		{
			icon: 'photo-o',
			name: '九银申请入口'
		},
		{
			icon: 'photo-o',
			name: '团队业务查询'
		},
		{
			icon: 'photo-o',
			name: '签到打卡'
		},
		{
			icon: 'photo-o',
			name: '定位追踪'
		},
		{
			icon: 'photo-o',
			name: '团队统计'
		},
		{
			icon: 'photo-o',
			name: '客户经理统计'
		},
		{
			icon: 'photo-o',
			name: '更多'
		}

	])


	onLoad(async () => {
		getSystemInfo();
		// let res = await InvestorInformation()
		// console.log(res,'res');
		// waterMark()
	})
	// 水印
	const waterMark = () => {
		console.log('这是水印');
		let waterMarker = '中联惠捷' + " " + '1638274';
		watermark(waterMarker);
	}
	// 获取设备信息
	const getSystemInfo = () => {
		uni.getSystemInfo({
			success: (res) => {
				console.log(res)
				store.commit('getPhoneOS', res.platform)

				if (res.hostName) {
					console.log(res.hostName);
					store.commit('getHostName', 'h5')
				}


			}
		});

	}
</script>

<style scoped lang="scss">
	@import "@/uni.scss";

	.content {
		// padding: 5px;
		display: flex;
		flex-direction: column;
	}

	// .my-swipe .van-swipe-item {
	//    color: #fff;
	//    font-size: 20px;
	//    line-height: 150px;
	//    text-align: center;
	//    background-color: #39a9ed;
	//  }

	.swiper {
		height: 200px;
	}

	.swiper-item {
		display: block;
		height: 200px;
		line-height: 200px;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.title-sty {
		position: relative;
		padding-left: 18px;
		height: 30px;
		line-height: 31px;
		background-color: #f5f5f5;
		font-size: 16px;
		font-weight: 600;

		/* 确保文字不会覆盖到竖杠 */
		.bar {
			position: absolute;
			left: 5px;
			top: 3px;
			bottom: 3px;
			width: 3px;
			background-color: $help-color;
		}
	}

	.two-content {}

	.three-item {
		height: 60px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
</style>
